<template>
  <div class="container">
    <el-card class="card">
      <!-- 面包屑 -->
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="
          margin-bottom: 10px;
          padding-bottom: 10px;
          border-bottom: 1px solid #e0e3e9;
          color: red;
        "
        v-if="parameter"
      >
        <el-breadcrumb-item style="color: #303133">学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- /面包屑 -->
      <el-form
        :model="requestParameters"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item label="目录名称">
          <el-input v-model="requestParameters.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            placeholder="请选择"
            v-model="requestParameters.state"
          >
            <el-option
              label="已启用"
              value="1"
            ></el-option>
            <el-option
              label="禁用"
              value="0"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button @click="clear">清除</el-button>
        <el-form-item>

          <el-button
            type="primary"
            @click="serach"
          >搜索</el-button>
        </el-form-item>
        <el-form-item style=" float:right">
          <el-button
            v-if="parameter"
            type="text"
            icon="el-icon-back"
            @click="$router.back()"
          >返回学科</el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="addDialogVisible = true"
          >新增目录</el-button>
        </el-form-item>
        <el-alert
          type="info"
          show-icon
        >数据一共{{this.total}}条</el-alert>
      </el-form>
      <el-table
        :data="list"
        stripe
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          prop="id"
          type="index"
          :index="indexMethod"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
        > </el-table-column>
        <el-table-column
          prop="tagName"
          label="标签名称"
        > </el-table-column>
        <el-table-column
          prop="username"
          label="创建者"
        > </el-table-column>
        <el-table-column
          label="创建日期"
          prop="addDate"
        >
          <template slot-scope="scope">
            {{
              scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="100px"
        >
          <template scope="scope">
            <div v-if="scope.row.state === 0">已禁用</div>
            <div v-else>已启用</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="qiehuan(scope.row)"
            >{{
              scope.row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              @click="update(scope.row.id)"
              size="mini"
              type="text"
              :disabled="scope.row.state === 0 ? false : true"
            >修改</el-button>
            <el-button
              @click="deleteTags(scope.row.id)"
              size="mini"
              type="text"
              :disabled="scope.row.state === 0 ? false : true"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        style="float:right; margin-top: 10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="requestParameters.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="requestParameters.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>

    <!-- 新增 -->
    <el-dialog
      title="新增目录"
      :visible.sync="addDialogVisible"
      width="30%"
      left
    >
      <!-- 学科进入 -->
      <el-form
        v-if="parameter"
        :model="addRuleForm"
        :rules="addRules"
        ref="addFormRef"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item
          prop="tagName"
          label="目录名称"
        >
          <el-input v-model="addRuleForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <!-- /学科进入 -->
      <el-form
        v-else
        :model="addRuleForm"
        :rules="addRules"
        ref="addFormRef"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item
          label="所属学科"
          prop="subjectID"
        >
          <el-select
            placeholder="请选择"
            v-model="addRuleForm.subjectID"
          >
            <el-option
              v-for="(item, index) in simplelist"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="tagName"
          label="目录名称"
        >
          <el-input v-model="addRuleForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="quxiao">取 消</el-button>
        <el-button
          type="primary"
          @click="addTags"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- /新增 -->
    <!-- 修改 -->
    <el-dialog
      title="修改目录"
      :visible.sync="updateDialogVisible"
      width="30%"
      left
    >
      <!-- 学科进入 -->
      <el-form
        v-if="parameter"
        :model="updateRuleForm"
        :rules="updateRules"
        ref="updateFormRef"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item
          prop="tagName"
          label="目录名称"
        >
          <el-input v-model="updateRuleForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <!-- /学科进入 -->
      <el-form
        v-else
        :model="updateRuleForm"
        :rules="updateRules"
        ref="updateFormRef"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item
          label="所属学科"
          prop="subjectID"
        >
          <el-select
            placeholder="请选择"
            v-model="updateRuleForm.subjectID"
          >
            <el-option
              v-for="(item, index) in simplelist"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="tagName"
          label="目录名称"
        >
          <el-input v-model="updateRuleForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="updateTags"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- /修改 -->

  </div>
</template>

<script>
import { list, remove, add, detail, update, changeState } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'

export default {
  data() {
    return {
      text: '',
      value: '',
      list: [], // 标签列表
      simplelist: [], // 学科简易列表
      total: 0,
      addDialogVisible: false, // 控制添加弹出层
      addRuleForm: {
        subjectID: null,
        tagName: null
      },
      addRules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      updateDialogVisible: false, // 控制修改弹出层
      updateRuleForm: {
        subjectID: '',
        tagName: ''
      },
      updateRules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      requestParameters: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        tagName: null,
        state: null
      },
      parameter: false
    }
  },
  created() {
    this.requestParameters.subjectID = this.$route.query.id // 学科进入传过来的id
    this.name = this.$route.query.name // 学科进入传过来的name
    this.tagsList()
    this.simpleList()
    this.tagsParameter()
  },
  methods: {
    // 列表
    async tagsList() {
      const { data } = await list(this.requestParameters)
      this.list = data.items
      this.total = data.counts
      console.log(this.list)
    },
    // 学科列表
    async simpleList() {
      const { data } = await simple()
      this.simplelist = data
      console.log('data', data)
    },
    // 判断是否学科进入
    tagsParameter() {
      if (this.$route.query.id) {
        this.parameter = true
      } else {
        this.parameter = false
      }
    },
    // 清除按钮
    clear() {
      this.requestParameters.tagName = undefined
      this.requestParameters.state = undefined
      this.tagsList()
    },
    // 搜索按钮
    serach() {
      this.requestParameters.page = 1
      this.tagsList(this.requestParameters)
    },
    handleSizeChange(newSize) {
      this.requestParameters.pagesize = newSize
      this.tagsList()
    },
    handleCurrentChange(newPage) {
      this.requestParameters.page = newPage
      this.tagsList()
    },
    // 开启  禁用
    async qiehuan(row) {
      if (row.state === 1) {
        row.state = 0
      } else {
        row.state = 1
      }
      await changeState({
        id: row.id,
        state: row.state
      })
    },
    // 新增
    addTags() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        console.log(this.$route.query.id)
        if (this.parameter) {
          this.addRuleForm.subjectID = this.$route.query.id - 0
        }
        await add(this.addRuleForm)
        this.$message.success('添加目录成功！')
        this.tagsList()
        this.addDialogVisible = false
        this.$refs.addFormRef.resetFields()
      })
    },
    quxiao() {
      this.addDialogVisible = false
      this.$refs.addFormRef.resetFields()
    },
    // 删除
    deleteTags(id) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点击确定的操作(调用接口)
        await remove({ id: id })
        this.tagsList()
      }).catch((e) => {
        // 点取消的提示
        console.log(e)
        console.log(123)
      })
    },
    // 修改
    async update(id) {
      this.updateDialogVisible = true
      const { data } = await detail({ id: id })
      this.updateRuleForm.id = data.id
      this.updateRuleForm.subjectID = data.subjectID
      this.updateRuleForm.tagName = data.tagName
    },
    updateTags() {
      this.$refs.updateFormRef.validate(async valid => {
        if (!valid) return
        const id = this.updateRuleForm.id
        await update({
          id,
          subjectID: this.updateRuleForm.subjectID,
          tagName: this.updateRuleForm.tagName
        })
        this.$message.success('修改目录成功！')
        this.tagsList()
        this.updateDialogVisible = false
      })
    },
    indexMethod(index) {
      return (this.requestParameters.page - 1) * this.requestParameters.pagesize + index + 1
    }
  }
}
</script>

<style scoped lang='less'>
.container {

  .el-input__inner {
    height: 20px;
    margin-top: 10px;
  }
  .el-button{
    margin-left: 5px;
  }
}
</style>
